<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item el-form-item label="流程名称" prop="flowName">
        <el-input
          v-model="queryParams.flowName"
          placeholder="请输入流程名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择">
          <el-option
            v-for="item in flowStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="flowInstList">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column
        label="流程名"
        align="center"
        key="flowInst.name"
        prop="flowInst.name"
        v-if="columns[0].visible"
      />
      <el-table-column
        label="流程状态"
        align="center"
        key="flowInst.status"
        prop="flowInst.status"
        v-if="columns[1].visible"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span style="color: orange" v-if="scope.row.flowInst.status == 0">进行中</span>
          <span style="color: #67c23a" v-if="scope.row.flowInst.status == 1">成功</span>
          <span style="color: red" v-if="scope.row.flowInst.status == 2">失败</span>
          <span style="color: grey" v-if="scope.row.flowInst.status == 3"
            >退回，待修改</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="申请时间"
        align="center"
        prop="flowInst.createTime"
        v-if="columns[2].visible"
        width="160"
      />
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-link
            :underline="false"
            class="el-icon-view"
            @click="detail(scope.row)"
            >详情</el-link
          >&nbsp;
          <el-link
            :underline="false"
            class="el-icon-edit"
            v-if="scope.row.flowInst.status == 3"
            @click="handleRevise(scope.row)"
            >修改</el-link
          >&nbsp;
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 流程详情对话框 -->
    <el-dialog
      title="流程详情"
      :visible.sync="detailDialog"
      :before-close="closeDetail"
    >
      <el-form :model="flowInst" label-position="right" label-width="80px">
        <el-form-item label="流程名称">
          <el-input
            :disabled="true"
            v-model="flowInst.name"
            autocomplete="off"
            style="width: 30%"
          />
        </el-form-item>
        <el-form-item label="申请时间">
          <el-input
            :disabled="true"
            v-model="flowInst.createTime"
            autocomplete="off"
            style="width: 30%"
          />
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-form :model="flowInst" label-position="right" label-width="100px">
        <div v-for="(item, index) in flowNodeInst" :key="(item, index)">
          <el-form-item label="节点名称">
            <el-input
              :disabled="true"
              v-model="item.name"
              autocomplete="off"
              style="width: 30%"
            />
          </el-form-item>
          <el-form-item label="节点状态">
            <span v-if="item.status == 0" style="color: grey">未开始</span>
            <span v-if="item.status == 1" style="color: orange">审核中</span>
            <span v-if="item.status == 2" style="color: green">通过</span>
            <span v-if="item.status == 3" style="color: red">终止</span>
            <span v-if="item.status == 4" style="color: black">回退</span>
          </el-form-item>
          <el-form-item label="审核人用户名">
            <el-input
              :disabled="true"
              v-model="item.relatedUserName"
              autocomplete="off"
              style="width: 30%"
            />
          </el-form-item>
          <el-form-item label="审核人昵称">
            <el-input
              :disabled="true"
              v-model="item.relatedUserNickName"
              autocomplete="off"
              style="width: 30%"
            />
          </el-form-item>
          <el-form-item label="审核时间">
            <el-input
              :disabled="true"
              v-model="item.time"
              autocomplete="off"
              style="width: 30%"
            />
          </el-form-item>
          <el-form-item label="审核ip">
            <el-input
              :disabled="true"
              v-model="item.ip"
              autocomplete="off"
              style="width: 30%"
            />
          </el-form-item>
          <el-form-item label="审核意见">
            <el-input
              :disabled="true"
              v-model="item.idea"
              autocomplete="off"
              style="width: 80%"
            />
          </el-form-item>
          <el-form-item label="审核签名">
            <img :src="item.sign" alt="" class="ca-img" />
          </el-form-item>
          <el-divider></el-divider>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDetail" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改申请对话框 -->
    <el-dialog
      title="修改申请"
      :before-close="cancelRevise"
      :visible.sync="reviseDialog"
    >
      <div>
        <h1>{{ formInfo.formName }}</h1>
        <el-form label-position="top" label-width="80px">
          <div v-for="(item, index) in answers" :key="(item, index)">
            <el-form-item
              :label="index + 1 + '、' + questions[index].questionName"
            >
              <div v-if="questions[index].questionType == 0">
                <el-input v-model="item.answer" type="textarea"></el-input>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelRevise()">取 消</el-button>
        <el-button type="primary" @click="submitRevise()">完成修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listFlowInst,
  getFlowForm,
  getFlowInstDetail,
  getFormInfo,
  getFlowAnswer,
  reviseBlank,
  editFlowStatus
} from "@/api/flow/myapply";

export default {
  data() {
    return {
      //正在修改的流程Id
      flowInstId: null,
      //表单信息
      formInfo: {},
      //表单问题
      questions: [],
      //表单答案
      answers: [],
      //修改申请对话框
      reviseDialog: false,
      //流程详情对话框
      detailDialog: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //流程数据列表
      flowInstList: [],
      // 日期范围
      dateRange: [],
      //表单信息
      formInfo: {},
      //表单题目
      questions: [],
      //表单答案
      answers: [],
      //流程实例信息
      flowInst: {},
      //流程节点实例信息
      flowNodeInst: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        userId: this.$store.state.user.id,
        flowName: undefined,
        status: undefined,
      },
      flowStatus: [
        { value: 0, label: "进行中" },
        { value: 1, label: "成功" },
        { value: 2, label: "失败" },
        { value: 3, label: "回退，待修改" },
      ],
      // 列信息
      columns: [
        { key: 0, label: `流程名`, visible: true },
        { key: 1, label: `流程状态`, visible: true },
        { key: 2, label: `申请时间`, visible: true },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询流程列表 */
    getList() {
      this.loading = true;
      listFlowInst(this.addDateRange1(this.queryParams, this.dateRange)).then(
        (response) => {
          console.log(response);
          this.flowInstList = response.flowInfoInst;
          this.total = response.counts;
          this.loading = false;
        }
      );
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 取消按钮
    cancel() {},
    //查看审核详情
    detail(row) {
      // var params1 = {
      //     formId: row.formId,
      //     flowInstId: row.id,
      // };
      // //获取表单信息、题目、答案
      // getFlowForm(params1).then((response) => {
      //     console.log(response);
      // });
      var params2 = {
        flowInstId: row.flowInst.id,
      };
      console.log(params2);
      //获取流程及其节点信息
      getFlowInstDetail(params2).then((response) => {
        console.log(response);
        this.flowInst = response.data.flowInst;
        this.flowNodeInst = response.data.flowNodeInst;
        this.detailDialog = true;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 发起申请按钮 */
    handleRevise(row) {
      this.flowInstId = row.flowInst.id;
      //获取业务表单基本信息、问题，创建答案数组
      var params1 = {
        formId: row.flowInst.formId,
      };
      getFormInfo(params1).then((response) => {
        console.log(response);
        this.formInfo = response.data.form;
        this.questions = response.data.questionList;
        for (var i = 0; i < this.questions.length; i++) {
          var params2 = {
            questionType: this.questions[i].questionType,
            questionId: this.questions[i].id,
            flowInstId: row.flowInst.id,
          };
          console.log("params2");
          console.log(params2);
          getFlowAnswer(params2).then((response) => {
            console.log(response);
            this.answers.push(response.answer);
          });
        }
      });
      this.reviseDialog = true;
    },
    //完成修改
    submitRevise() {
      //提交业务表单
      for (var i = 0; i < this.answers.length; i++) {
        switch (this.questions[i].questionType) {
          case 0:
            var blank = {
              id: this.answers[i].id,
              userId: this.answers[i].userId,
              formId: this.answers[i].formId,
              questionId: this.answers[i].questionId,
              answer: this.answers[i].answer,
              creatTime: this.answers[i].creatTime,
              isSubmit: this.answers[i].isSubmit,
              flowInstId: this.answers[i].flowInstId,
              recordId: this.answers[i].recordId,
            };
            reviseBlank(blank).then((response) => {
              console.log(response);
              //修改流程，传递流程实例Id，将流程状态修改为0
              var params = {
                id: this.flowInstId,
                status: 0,
              };
              editFlowStatus(params).then((response) => {
                console.log(response);
                //完成修改
                this.resetRevise();
                this.reviseDialog = false;
                this.handleQuery();
              });
            });
            break;
        }
      }
    },
    //重置修改申请对话框
    resetRevise() {
      this.flowInstId = null;
      this.formInfo = {};
      this.questions = [];
      this.answers = [];
    },
    //重置流程详情对话框
    resetDetail() {
    this.flowInst={};
    this.flowNodeInst=[];
    },
    //取消修改
    cancelRevise() {
      this.resetRevise();
      this.reviseDialog = false;
    },
    //关闭详情
    closeDetail() {
      this.resetDetail();
      this.detailDialog = false;
    },
  },
};
</script>
